<template>
  <div class="charts-case card-page">
    <el-row :gutter="20"
      style="margin">
      <el-col :span="8">
        <div class="grid-content dark">
          <div class="title">横向滚动，增加resize</div>
          <div class="chart-cont">
            <Datazoom :objdata="datazoomData" />
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content">
          <div class="title">label换行</div>
          <div class="chart-cont">
            <LongLabel :objdata="longLabelData" />
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content dark">
          <div class="title">纵向滚动、y轴label富文本两端对齐</div>
          <div class="chart-cont">
            <DatazoomY :objdata="datazoomYData" />
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="8">
        <div class="grid-content dark">
          <div class="title">累计柱状图、末端显示合计值、柱有最小宽度</div>
          <div class="chart-cont">
            <AccuBar :objdata="accuBarData" />
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content">
          <div class="title">echarts滚动条</div>
          <div class="chart-cont"
            id="chart-datazoom"></div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content">
          <div class="title">echarts滚动条</div>
          <div class="chart-cont"
            id="chart-datazoom"></div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import AccuBar from './comp/accubar.vue';
  import Datazoom from './comp/datazoom.vue';
  import DatazoomY from './comp/datazoomY.vue';
  import LongLabel from './comp/longlabel.vue';
  import { datazoomData, datazoomYData, longLabelData, accubarData } from './test.js';

  export default {
    name: 'ChartsCase',
    components: {
      Datazoom,
      LongLabel,
      DatazoomY,
      AccuBar
    },
    data() {
      return {
        datazoomData: {},
        datazoomYData: {},
        longLabelData: {},
        accuBarData: {}
      };
    },
    created() {
      setTimeout(() => {
        this.datazoomData = datazoomData;
        this.datazoomYData = datazoomYData;
        this.longLabelData = longLabelData;
        this.accuBarData = accubarData;
      }, 1000);
    }
  };
</script>

<style lang="scss" scoped>
  .charts-case {
    position: relative;
    overflow-x: hidden;
    overflow-y: scroll;
    .grid-content {
      background-color: $--light-green-bg;
    }
    .dark {
      background-color: rgba(26, 56, 81, 0.6);
      .title {
        color: #fff;
      }
    }
    .title {
      padding: 10px;
    }
    .chart-cont {
      height: 500px;
    }
    .el-row {
      margin-bottom: 20px;
      &:last-child {
        margin-bottom: 0;
      }
    }
  }
</style>